import * as THREE from '../../build/three.module.js';
import {
  OrbitControls
} from '../../jsm/controls/OrbitControls.js';

const scene = new THREE.Scene();

/**
 * 材质数组
 *    即将多个材质对象够成的数组作为模型的材质对象
 */
const sphereGeo = new THREE.SphereGeometry(100, 30, 30);
// 材质对象1_高光
const mat1 = new THREE.MeshPhongMaterial({
  color: 0xffff3f,
  side: THREE.DoubleSide
});
// 纹理
const textureLoader = new THREE.TextureLoader();
const texture = textureLoader.load('../../textures/earth_atmos_2048.jpg');
// 材质对象2_纹理
const mat2 = new THREE.MeshLambertMaterial({
  map: texture,
  side: THREE.DoubleSide
});
// 材质数组
const mat_arr = [mat2, mat1];
// 模型
const mesh = new THREE.Mesh(sphereGeo, mat_arr);

/**
 * 三角形面可以设置材质索引
 *    .materilaIndex
 * 指向数组材质种的材质对象，表示材质数组中哪个材质用于渲染该面
 */
console.log(mesh);
mesh.geometry.faces.forEach((face, i) => {
  face.materialIndex = i % 2;
});

scene.add(mesh);

const ambientL = new THREE.AmbientLight(0xffffff);
scene.add(ambientL);
const k = innerWidth / innerHeight,
      s = 200,
      camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 10000);
camera.position.set(0, 0, 400);
camera.lookAt(scene.position);
const renderer = new THREE.WebGLRenderer();
renderer.setClearColor(0xaaaaaa);
renderer.setSize(innerWidth, innerHeight);
document.body.appendChild(renderer.domElement);
new OrbitControls(camera, renderer.domElement);

(function render() {
  requestAnimationFrame(render);
  renderer.render(scene, camera);
})();